import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import SvgIcons from '@/assets/svg';

type ChatNavigationProps = {
  title: string;
  showMore?: boolean;
  rightSlot?: any;
};

const ChatNavigation = ({title, showMore = true, rightSlot}: ChatNavigationProps) => {
  const navigation = useNavigation();
  return (
    <View style={styles.navBar}>
      <TouchableOpacity onPress={() => navigation.goBack()} style={styles.navBarButtonContainer}>
        <Text style={styles.navBarButton}>
          <SvgIcons.ChevronLeftIcon width={24} height={24} color="#0084ff" />
        </Text>
      </TouchableOpacity>
      <Text style={[styles.navBarTitle, styles.centerTitle]}>{title}</Text>
      <View style={styles.navBarButtonContainer}>
        {rightSlot
          ? rightSlot
          : showMore && (
              <TouchableOpacity onPress={() => navigation.navigate('ChatSettings' as never)}>
                <Text style={styles.navBarButton}>更多</Text>
              </TouchableOpacity>
            )}
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  navBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 10,
    height: 50,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  navBarButtonContainer: {
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  navBarButton: {
    color: '#007AFF',
  },
  navBarTitle: {
    fontWeight: 'bold',
  },
  centerTitle: {
    alignSelf: 'center',
  },
});

export default ChatNavigation;
